<?php
    include 'libs/class.photomanager/class.photomanager.php';

    if ($_REQUEST['source']) {
        $resource = new photomanager($_REQUEST['source'], 'destination.png');
        // crop and resize
        $resource->resizeAndCrop(
            $_REQUEST['output_width'],
            $_REQUEST['output_height'],
            $_REQUEST['image_width'],
            $_REQUEST['image_height'],
            $_REQUEST['offset_left'],
            $_REQUEST['offset_top'],
            $_REQUEST['background_color'],
            '>'
        );
        print('<pre>');print_r($resource->getLog());print('</pre>');
        exit;
    }

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Photomanager</title>
    <script src="components/jquery-ui-1.7.custom/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="components/jquery-ui-1.7.custom/js/jquery-ui-1.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="libs/jquery.photomanager/jquery.photomanager.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="libs/jquery.photomanager/jquery.photomanager.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="components/jquery-ui-1.7.custom/css/ismanager/jquery-ui-1.7.custom.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
    <script type="text/javascript" charset="utf-8">
        
        $(document).ready(function () {
            // $('#container').photomanager({
            $('body').photomanager({
                'source' : 'medias/flickr/55547135_e9b5dab37c_b.jpg',
                rules: {
                    // closable: false
                },
                callback: {
                    onsave: function(instance, parameters) {
                        instance.close();
                        $.ajax({
                           type: 'POST',
                           url: 'photomanager.php',
                           data: {
                               source: instance.settings.source,
                               output_width: parameters.output_width,
                               output_height: parameters.output_height,
                               image_width: parameters.image_width,
                               image_height: parameters.image_height,
                               offset_left: parameters.offset_left,
                               offset_top: parameters.offset_top,
                               background_color: parameters.background_color
                           },
                           success: function(msg){
                               // console.log(msg);
                               $('#destination').attr('src', 'destination.png?time='+(new Date().getTime()));
                           }
                         });
                        
                    }
                }
            });
        });

    </script>
    <style type="text/css" media="screen">
        
        #container {
            width: 900px;
            height: 600px;
/*            border: 1px solid #999;*/
        }
        
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Image test 1</a></li>
    </ul>
    <img src="destination.png" id="destination">
    <div id="container"></div>
</body>
</html>